<template>
  <el-dialog
    class="nodeHyperlinkDialog"
    :title="t('nodeHyperlink.title')"
    v-model="dialogVisible"
    :width="isMobileDevice ? '90%' : '50%'"
    :top="isMobileDevice ? '20px' : '15vh'"
  >
    <div class="item">
      <span class="name">{{ t('nodeHyperlink.link') }}</span>
      <el-input
        v-model="link"
        size="small"
        placeholder="http://xxxx.com/"
        @keyup.stop
        @keydown.stop
        @blur="handleUrl()"
      >
        <el-select v-model="protocol" slot="prepend" style="width: 80px;">
          <el-option label="https" value="https"></el-option>
          <el-option label="http" value="http"></el-option>
          <el-option label="�?" value="none"></el-option>
        </el-select>
      </el-input>
    </div>
    <div class="item">
      <span class="name">{{ t('nodeHyperlink.name') }}</span>
      <el-input
        v-model="linkTitle"
        size="small"
        @keyup.stop
        @keydown.stop
      ></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{ t('dialog.cancel') }}</el-button>
        <el-button type="primary" @click="confirm">{{
          t('dialog.confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useI18n } from 'vue-i18n'
import { useEventBus } from '@/hooks'
import { isMobile } from 'simple-mind-map/src/utils/index'

const { t } = useI18n()
const { $on, $off, $emit, $once } = useEventBus()

const dialogVisible = ref(false)
const link = ref('')
const linkTitle = ref('')
const activeNodes = ref([])
const protocol = ref('https')
const isMobileDevice = isMobile()

const handleNodeActive = (...args) => {
  activeNodes.value = [...args[1]]
  if (activeNodes.value.length > 0) {
    let firstNode = activeNodes.value[0]
    link.value = firstNode.getData('hyperlink') || ''
    handleUrl(true)
    linkTitle.value = firstNode.getData('hyperlinkTitle') || ''
  } else {
    link.value = ''
    linkTitle.value = ''
  }
}

const removeProtocol = (url) => {
  return url.replace(/^https?:\/\//, '')
}

const handleUrl = (setProtocolNoneIfNotExist) => {
  const res = link.value.match(/^(https?):\/\//)
  if (res && res[1]) {
    protocol.value = res[1]
  } else if (!link.value) {
    protocol.value = 'https'
  } else if (setProtocolNoneIfNotExist) {
    protocol.value = 'none'
  }
  link.value = removeProtocol(link.value)
}

const handleShowNodeLink = () => {
  dialogVisible.value = true
}

const cancel = () => {
  dialogVisible.value = false
}

const confirm = () => {
  activeNodes.value.forEach(node => {
    node.setHyperlink(
      (protocol.value === 'none' ? '' : protocol.value + '://') + link.value,
      linkTitle.value
    )
    cancel()
  })
}

onMounted(() => {
  $on('node_active', handleNodeActive)
  $on('showNodeLink', handleShowNodeLink)
})

onBeforeUnmount(() => {
  $off('node_active', handleNodeActive)
  $off('showNodeLink', handleShowNodeLink)
})
</script>

<style lang="less" scoped>
.nodeHyperlinkDialog {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .name {
      display: block;
      width: 50px;
    }
  }
}
</style>
